<template>
	<view>
		<div class="top-bg">
		</div>
		
		<div class="opt-btn" @click="openWrite()">
			<u-icon name="plus" size="64"></u-icon>
		</div>
		
		<u-popup v-model="deleteShow" mode="center" :closeable="true" border-radius="14" width="80%">
			<h2 style="margin: 20rpx;">确认删除笔记？</h2>
			<h4 style="margin-bottom: 40rpx;"></h4>
			<h4 style="margin: 20rpx;text-align: center;">{{notepad.notepadTitle}}</h4>
			<u-divider style="margin-bottom: 10rpx;">创建时间：{{notepad.createTime}}</u-divider>
			<h2 style="margin-bottom: 40rpx;"></h2>
			<u-button type="error" @click="deleteNotepadByUuid(notepad)" style="margin: 20rpx;">确认</u-button>
		</u-popup>

		<u-popup v-model="writeShow" mode="bottom" :closeable="true" border-radius="14" width="100%" height="95%">
			<h2 style="margin: 20rpx;">新建笔记</h2>
			<h2 style="margin-bottom: 40rpx;"></h2>
			<u-input v-model="title" placeholder="标题" type="textarea" maxlength="30" :border="true"
				:clearable="false" style="margin: 20rpx;font-weight: 600;" />
			<u-input v-model="content" placeholder="内容" type="textarea" height="800" :auto-height="false"
				:clearable="false" maxlength="800" :border="true" style="margin: 20rpx;" />
			<u-button type="primary" @click="insertNotepad()" style="margin: 20rpx;">确认</u-button>
		</u-popup>

		<u-popup v-model="readShow" mode="bottom" :closeable="true" border-radius="14" width="100%" height="95%">
			<h2 style="margin-bottom: 100rpx;"></h2>
			<u-input v-model="notepad.notepadTitle" placeholder="标题" type="textarea" maxlength="30" :border="false"
				:clearable="false" style="margin: 20rpx;font-weight: 600;" />
			<u-divider style="margin-bottom: 10rpx;">创建时间：{{notepad.createTime}}</u-divider>
			<u-input v-model="notepad.notepadContent" placeholder="内容" type="textarea" height="800" :auto-height="false"
				maxlength="800" :border="false" :clearable="false" style="margin: 20rpx;" />
			<u-divider style="margin-bottom: 10rpx;">最近更新：{{notepad.updateTime}}</u-divider>
			<u-row gutter="16">
				<u-col span="6">
					<u-button type="primary" @click="updateNotepadByUuid(notepad)" style="margin: 20rpx;">保存</u-button>
				</u-col>
				<u-col span="6">
					<u-button type="error" @click="openDelete()" style="margin: 20rpx;">删除</u-button>
				</u-col>
			</u-row>
		</u-popup>

		<div style="margin: 20rpx;background-color: #FFFFFF;">
			<u-grid :col="1">
				<u-grid-item>
					<u-avatar :src="headImg" size="128"></u-avatar>
					<h2 style="margin-top: 10rpx;">我的笔记</h2>
					<u-divider style="margin-top: 10rpx;">共{{notepadList.length}}条笔记</u-divider>
				</u-grid-item>
			</u-grid>
		</div>

		<div v-for="(item, index) in notepadList" :key="index">
			<u-card :show-head="false" style="margin: 20rpx;" @click="getNotepadByUuid(item.notepadUuid)">
				<view slot="body">
					<h3 style="color: #000000;">{{item.notepadTitle}}</h3>
				</view>
				<view class="" slot="foot">
					<u-icon name="clock" size="34" color="" :label="'最近更新：'+item.updateTime"></u-icon>
				</view>
			</u-card>
		</div>

		<u-tabbar v-model="current" :list="downList" :mid-button="false" :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script src="./notepad.js">

</script>

<style src="./notepad.css">

</style>
